<template>
  <div class="aList">
    <!-- Container Wrapper -->
    <div id="mws-container" class="clearfix">
      <div class="container">
        <div v-show="false"> {{dataList}}{{qList}}</div>
        <div class="mws-panel grid_8 mws-collapsible" v-for="(list, index) in dataList" v-if="list[0]">
          <div class="mws-panel-header">
            <span class="mws-i-24 i-table-1" v-text="list[0].q_class.q_class"></span>
            <div class="mws-collapse-button mws-inset"><span class=""></span></div>
          </div>
          <div class="mws-panel-body">
            <el-table
              :data="list"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="ID"
                sortable
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="q_timer"
                label="日期"
                sortable
                width="100"
                :filters="timerList"
                :filter-method="filterHandler"
              >
              </el-table-column>
              <el-table-column
                prop="q_content"
                label="问题描述">
              </el-table-column>
              <el-table-column
                prop="q_level"
                label="紧急程度"
                width="120"
                sortable
                :filters="levelDetail"
                :filter-method="filterHandler">
              </el-table-column>
              <el-table-column
                prop="q_status"
                label="状态"
                width="120"
                sortable
                :filters="statusDetail"
                :filter-method="filterHandler"
              >
              </el-table-column>
              <el-table-column
                prop="q_checkOut"
                label="测试确认"
                width="120"
                sortable
                :filters="checkDetail"
                :filter-method="checkHandler"
              >
              </el-table-column>
              <el-table-column
                prop="q_backUp"
                label="备注"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="290">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="warning"
                    @click="fixBug(scope.row.id, '1', scope.row.q_status,scope.row.a_user)">开始修复
                  </el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="fixBug(scope.row.id, '3', scope.row.q_status,scope.row.a_user)">修复完成
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="qDetele(scope.row.id,scope.row.a_user)">无法修复
                  </el-button>
                </template>
              </el-table-column>
              <!--<el-table-column label="操作"-->
              <!--width="200"-->
              <!--&gt;-->
              <!--<template slot-scope="scope">-->
              <!--<el-button-->
              <!--size="mini"-->
              <!--type="primary"-->
              <!--@click="startRe(index,'1',scope.row.id, scope.row.q_status)">通过</el-button>-->
              <!--<el-button-->
              <!--size="mini"-->
              <!--type="success"-->
              <!--@click="startRe(index,'2',scope.row.id, scope.row.q_status)">未通过</el-button>-->
              <!--<el-button-->
              <!--size="mini"-->
              <!--type="danger"-->
              <!--@click="startRe(index,'3',scope.row.id, scope.row.q_status)">删除</el-button>-->
              <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </div>
        </div>
      </div>
      <!-- End Footer -->

    </div>
    <!-- End Container Wrapper -->
  </div>
</template>

<script>
  export default {
    name: 'aList',
    data() {
      return {
        baseUrl: 'http://47.95.200.225:80',
        // baseUrl: 'http://192.168.0.147:8000',
        user: [],
        qList: [],
        qcList: [],
        dataList: [],
        tmpList: [],
        timer: [],
        timerList: [],
        levelDetail: [{text: '可推迟', value: '可推迟'}, {text: '优先修复', value: '优先修复'}, {
          text: '紧急修复',
          value: '紧急修复'
        }, {text: '立刻修复', value: '立刻修复'}],
        statusDetail: [{text: '未修复', value: '未修复'}, {text: '修复中', value: '修复中'}, {
          text: '测试中',
          value: '测试中'
        }, {text: '修复完成', value: '修复完成'}, {text: '无法修复', value: '无法修复'}],
        checkDetail: [{text: '未测试', value: '未测试'}, {text: '通过', value: '通过'}, {text: '未通过', value: '未通过'}],
        q_backUp: ''
      }
    },
    methods: {
      getQClassList() {
        let self = this
        this.$ajax
          .get(self.baseUrl + '/qcList/')
          .then(function (res) {
            self.qcList = res.data
            self.qcList.forEach((item, i) => {
              self.tmpList[i] = []
            })
            self.getQList()
          })
          .catch(function (response) {
            // console.log(response)
          })
      },
      getQList() {
        let self = this
        this.$ajax
          .get(self.baseUrl + '/qaList/')
          .then(function (res) {
            self.qList = res.data
            self.qList.forEach((l, i) => {
              // console.log(self.timerList.indexOf(l.q_timer.substring(0, 10)))
              if (self.timer.indexOf(l.q_timer.substring(0, 10)) === -1) {
                let obj = {}
                obj.text = l.q_timer.substring(0, 10)
                obj.value = l.q_timer.substring(0, 10)
                self.timer.push(l.q_timer.substring(0, 10))
                self.timerList.push(obj)
              }
            })
            self.getDataList()
          })
          .catch(function (response) {
            // console.log(response)
          })
      },
      getDataList() {
        let self = this
        self.qList.forEach((item, index) => {
          self.qcList.forEach((n, i) => {
            if (item.q_class.q_class === n.q_class) {
              if (item.q_checkOut !== '1') {
                item.q_timer = item.q_timer.substring(0, 10)
                item.q_level = self.levelDetail[item.q_level].value
                item.q_status = self.statusDetail[item.q_status].value
                item.q_checkOut = self.checkDetail[item.q_checkOut].value
                self.tmpList[i].push(item)
              }
            }
          })
        })
        self.dataList = self.tmpList
        self.tmpList = []
      },
      formatter(row, column) {
        return row.q_level
      },
      filterTag(value, row) {
        return row.a_user === value
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      },
      checkHandler(row, column) {
        return row.q_check
      },
      fixBug(id, status, ok, user) {
        let self = this
        let params = new URLSearchParams()
        if (ok === '修复中') {
          self.$message({
            type: 'success',
            message: '已在修复中！'
          })
          return false
        }
        if (ok === '无法修复') {
          self.$message({
            type: 'success',
            message: '此问题已做无法修复处理！'
          })
          return false
        }
        if (ok === '修复完成') {
          self.$message({
            type: 'success',
            message: '此问题已修复完成！'
          })
          return false
        }
        if (user.length !== 0 ) {
          if (user !== self.user.username) {
            self.$message({
              type: 'error',
              message: '您不是问题的修复者！'
            })
            return false
          }
        }
        if (status === '1') {
          params.append('q_status', '1')
        } else if (status === '3') {
          params.append('q_status', '3')
        }
        params.append('id', id)
        params.append('a_user', self.user.username)
        self.$ajax
          .post(self.baseUrl + '/changeQ/', params)
          .then(function (res) {
            if (res.data.status === 'ok') {
              self.getQClassList()
              if (status === '1') {
                alert('抢单成功！')
              } else if (status === '3') {
                alert('填坑完成，辛苦了！')
              }
            }
          })
          .catch(function (response) {
            console.log(response)
          })

        // changeQ
      },
      qDetele(id, user) {
        let self = this
        if (user !== '暂无') {
          if (user !== self.user.username) {
            self.$message({
              type: 'error',
              message: '您不是问题的修复者！'
            })
            return false
          }
        }
        this.$prompt('请输入原因(备注)', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          self.$ajax
            .get(self.baseUrl + '/backUp/?id=' + id + '&q_backUp=' + value + '&a_user=' + self.user.username)
            .then(function (res) {
              self.$message({
                type: 'success',
                message: res.data.message
              })
              self.getQClassList()
            })
            .catch(function (response) {
              // console.log(response)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      }
    },
    mounted() {
      let self = this
      let login = sessionStorage.getItem('userDetail')
      if (login) {
        this.user = JSON.parse(login)
      } else {
        self.$router.push({path: '/login'})
      }
      self.getQClassList()
    }
  }
</script>

<style scoped>
  .ct {
    text-align: center
  }
</style>
